<template>
	<!-- <view class="login">
			<view class="login_guanli">
				
				<view class="login_guanli_title">商户端登录</view>
				
				<view class="login_guanli_list">
					<image src="/static/image/login/zhanghao.png"></image>
					<input  v-model="mobile" placeholder="请输入账号或者手机号"  type="text" class="login_neirong"  placeholder-class="login_placeholder" />
				</view>
				<view class="login_guanli_list">
					<image src="/static/image/login/mima.png"></image>
					<input  v-model="password" placeholder="请输入密码"  maxlength="16"  type="password" class="login_neirong"  placeholder-class="login_placeholder" />
				</view>
				
				<view class="content two_four text_center white_ziti" style="margin-top:20rpx;text-align: right;">
					<text style="text-decoration: underline;" @click="publics.navigateTo('mima')">忘记密码</text>
				</view>
				
				<view class="anniu" style="width:100%;margin-top:50rpx" @click="denglu">登录</view>
				
				<view class="jizhuzhanghao two_four white_ziti" style="justify-content: flex-start;">
					<image src="/static/image/login/xuanzhong.png" @click="yinsixieyi" v-show="Privacy"></image>
					<image src="/static/image/login/weixuanzhong.png" @click="yinsixieyi" v-show="!Privacy">
					</image>
					<view>
						我已阅读并同意
						<text class="zhuce_color" @click="publics.navigateTo('xieyi')">《用户协议》</text>与
						<text class="zhuce_color" @click="publics.navigateTo('yinsi')">《隐私政策》</text>
					</view>
				</view>
			</view>

		<requestLoading></requestLoading>
	</view> -->
	
	<view class="staff_cont">
		<view class="main_body">
			<view class="logo_title">
				<view class="logo">
					<image src="../../static/login/logo.png" mode=""></image>
				</view>
				<view class="title">
					员工登录
				</view>
			</view>
	
			<view class="login_form">
				
				<view class="account">
					<view class="account_icon">
						<image src="../../static/login/user.png" mode=""></image>
					</view>
					<view class="divider">
	
					</view>
					<view class="account_input">
						<u--input v-model="mobile" placeholder="请输入账号" border="none"></u--input>
					</view>
				</view>
				<view class="password">
					<view class="pw_icon">
						<image src="../../static/login/password.png" mode=""></image>
					</view>
					<view class="divider">
	
					</view>
					<view class="account_input">
						<u--input v-model="password" placeholder="请输入密码" border="none" type="password"></u--input>
					</view>
				</view>
			</view>
	
			<view class="remember_pw">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="groupChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxlist1" :key="index"
						:label="item.name" :name="item.name" shape="squera" @change="checkboxChange">
					</u-checkbox>
				</u-checkbox-group>
			</view>
	
			<view class="login_btn fl-center"  @click="denglu">
				<view class="">
					登录
				</view>
			</view>
	
			<view class="tip">
				提醒：还没有账号？忘记密码？联系婚选服务人员
			</view>
		</view>
		<view class="staff_bg">
			<image src="../../static/login/staff_login_bg.png" mode=""></image>
		</view>
		
		<!-- <requestLoading></requestLoading> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '', //手机号
				password: '', //密码
				tishi: 1, //展示加载动画
				Privacy: true, //是否同意用户协议
				zhuangtai: 1, //1 管理员  2 员工  3 手机号
				code:'',       //图形验证码
				tuxing_yanzheng:'',
				uuid:'',        //uuid
				type:1,
				checkboxlist1: [{
					name: '记住密码',
					disabled: false
				}],
				checkboxValue:[],
			};
		},
		onLoad() {
			var that = this;
			// that.tuxing();	
		},
		onShow() {
			uni.removeStorageSync('token_token')
		},
		methods: {
			// 图形验证码
			// tuxing(){
			// 	var that = this;
			// 	this.configure.ajax({
			// 		url: 'captchaImage',
			// 		tishi: that.tishi,
			// 		zhuang:1,
			// 		data: {},
			// 		method: 'GET',
			// 		success: function(res) {
			// 			if(res.code==200){
			// 				that.tuxing_yanzheng='data:image/png;base64,'+res.img;
			// 				that.uuid=res.uuid;
			// 			}else{
			// 				uni.showToast({
			// 					title: res.msg,
			// 					icon: "none"
			// 				});
			// 			}
			// 		}
			// 	})
			// },
			groupChange(n) {
				console.log('groupChange', n);
			},
			checkboxChange(n) {
				console.log('checkboxChange', n);
			},
			denglu() {
				console.log('login')
				var that = this;
				if (that.mobile == '') {
					uni.showToast({
						title: '请输入账号或者手机号',
						icon: "none"
					});
					return false;
				}
				if (that.publics.patt1.test(that.mobile)) {
					uni.showToast({
						title: '账号或者手机号不能为空',
						icon: "none"
					});
					return false;
				}
			
				if (!that.publics.password.test(that.password)) { // 判断密码
					uni.showToast({
						title: '密码格式错误,拼音+数字,不能低于六位',
						icon: "none"
					});
					return false;
				};
				
				if(this.Privacy==false){
					uni.showToast({
						title: '请勾选用户协议',
						icon: "none"
					});
					return false;
				}
				
				this.configure.ajax({
					url: 'user/login/bhyxLogin',
					// url: 'login',
					tishi: that.tishi,
					zhuang:1,
					data: {
						username: that.mobile,
						password: that.password,
						// code:that.code,
						uuid:that.uuid,
						type:that.type
					},
					method: 'POST',
					success: function(res) {
						console.log('dddddddddddd')
						console.log(res)
						if(res.code==1){
							// that.configure.login.commit("hide_login")
							uni.setStorageSync('token_token', res.data.token);
							uni.setStorageSync('shopaddress', res.data.user.shopaddress);
							that.publics.reLaunch("/pages/index/index1")
						}else{ 
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
							that.tuxing()
						}
						
					}
				})
			},
			// 点击隐私协议
			yinsixieyi() {
				this.Privacy = !this.Privacy
			}
		}
	};
</script>

<style lang="scss">
	.login{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #fff;
		// background-size: cover;
		// background-image: url('http://bhyx-oss.oss-cn-hangzhou.aliyuncs.com/Guestfunds/logoo.png');
	}
	.jizhuzhanghao{
		width: 100%;
		overflow: hidden;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
	}
	.jizhuzhanghao image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.login_content{
		width: calc(100% - 150rpx);
		margin: 0rpx auto;
		position: fixed;
		bottom: 30rpx;
		left:75rpx;
	}
	.login_one{
		width: 100%;
		height:80rpx;
		border: 2rpx solid $white_ziti;
		background:none;
		color:$white_ziti;
		font-size:30rpx;
	}
	.login_guanli{
		width: calc(100% - 250rpx);
		margin: 0rpx auto;
		padding:50rpx;
		overflow: hidden;
		// filter: blur(undefinedpx);
		// background: rgba(255, 255, 255, .3);
		// backdrop-filter: blur(10rpx);
		// background-color: ;
		border-radius: 10rpx;
		margin-top:calc((100vh - 740rpx) / 2);
	}
	.login_guanli_title{
		width:100%;
		overflow: hidden;
		color:$white_ziti;
		font-size:30rpx;
		text-align: center;
		margin-bottom:60rpx;
	}
	.login_guanli_list{
		width: 100%;
		height:60rpx;
		background-color: #F2F8FD;
		display: flex;
		border-bottom: 2rpx solid $white_ziti;
		padding-bottom:10rpx;
		align-items: center;
		margin-top:40rpx;
		image{
			width:30rpx;
			height:36rpx;
			margin-right:24rpx;
		}
		.login_placeholder{
			font-size:26rpx;
			color:rgba($white_ziti,0.6);
			background-color: transparent;
		}
		.login_neirong{
			width: calc(100% - 56rpx);
			font-size:28rpx;
			background-color: transparent;
			color:$white_ziti;
		}
	}
	.fl-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.staff_cont {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
	}
	
	.main_body {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 250rpx;
	}
	
	.logo_title {
		display: flex;
		align-items: center;
	
		.logo {
			width: 92rpx;
			height: 92rpx;
			margin-right: 20rpx;
	
			image {
				width: 92rpx;
				height: 92rpx;
			}
		}
	
		.title {
			font-weight: 700;
			font-size: 58rpx;
			color: #000000;
		}
	}
	
	.login_form {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 72rpx;
	
		.account {
			width: 542rpx;
			height: 75rpx;
			background: #F2F8FD;
			border-radius: 34rpx;
			display: flex;
			align-items: center;
			padding: 12rpx 28rpx;
			box-sizing: border-box;
			margin-bottom: 43rpx;
		}
	
		.password {
			width: 542rpx;
			height: 75rpx;
			background: #F2F8FD;
			border-radius: 34rpx;
			display: flex;
			align-items: center;
			padding: 12rpx 28rpx;
			box-sizing: border-box;
		}
	}
	
	.account_icon {
		width: 42rpx;
		height: 36rpx;
	
		image {
			width: 42rpx;
			height: 36rpx;
		}
	}
	
	.pw_icon {
		width: 30rpx;
		height: 36rpx;
		margin: 0 6rpx;
	
		image {
			width: 30rpx;
			height: 36rpx;
		}
	}
	
	.divider {
		width: 3rpx;
		height: 50rpx;
		background: #72757F;
		margin: 0 20rpx 0 18rpx;
	}
	
	.remember_pw {
		width: 542rpx;
		display: flex;
		justify-content: flex-start;
		padding-left: 20rpx;
		box-sizing: border-box;
		margin: 52rpx 0 44rpx 0;
	}
	.login_btn {
		width: 542rpx;
		height: 87rpx;
		background: #FF586C;
		border-radius: 40rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.tip {
		font-weight: 500;
		font-size: 21rpx;
		color: #7D7D7D;
		margin-top: 43rpx;
	}
	
	.staff_bg {
		width: 750rpx;
		height: 374rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
